<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-line">
                <div class="icon" style="--icon: url(/Demo-Favicon.ico)"></div>
            </div>
            <div class="title">Sign in to your account</div>
            <div class="input-box">
                <div class="input-item">
                    <!-- <div class="input-name">Email address</div> -->
                    <div class="input-name">Account</div>
                    <div class="input-line">
                        <div class="icon" style="--icon: url(/icon/login/admin.svg)"></div>
                        <!-- <input type="text" placeholder="you@example.com" /> -->
                        <input type="text" placeholder="Input your account" v-model="account" @keyup.enter="login" />
                    </div>
                    <div class="input-error" :style="`opacity: ${ form_error.account.show_error ? 1 : 0 }`">{{ form_error.account.error_text }}</div>
                </div>
                <div class="input-item">
                    <div class="input-name">Password</div>
                    <div class="input-line">
                        <div class="icon" style="--icon: url(/icon/login/password.svg)"></div>
                        <input type="password" placeholder="Input your password" v-model="password" @keyup.enter="login" />
                    </div>
                    <div class="input-error" :style="`opacity: ${ form_error.password.show_error ? 1 : 0 }`">{{ form_error.password.error_text }}</div>
                </div>
            </div>
            <div class="btn-box">
                <div class="btn login-btn" @click="login">Sign In</div>
                <div class="btn register-btn" @click="routerTo('/register')">Sign Up</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { routerTo } from '@/utils/jump';
import { account, password, authService } from '@/service/auth';
import { loading } from '@/service/status';

const form_error = reactive({
    account: {
        show_error: false,
        error_text: '',
    },
    password: {
        show_error: false,
        error_text: '',
    },
});

async function login() {
    let call = true;
    if (account.value == '') {
        form_error.account.show_error = true;
        form_error.account.error_text = 'Please enter your email address';
        call = false;
    } else {
        form_error.account.show_error = false;
        form_error.account.error_text = '';
    }
    if (password.value == '') {
        form_error.password.show_error = true;
        form_error.password.error_text = 'Please enter your password';
        call = false;
    } else {
        form_error.password.show_error = false;
        form_error.password.error_text = '';
    }
    if (call) {
        loading.value = true;
        await authService.login();
        loading.value = false;
    }
}

onMounted(() => {
    account.value = '';
    password.value = '';
});
</script>

<style scoped lang="less">
.login-container {
    width: 100%;
    height: 40vw;
    min-height: calc(100vh - var(--nav-height) - var(--footer-height));
    display: flex;
    justify-content: center;
    align-items: center;

    .login-box {
        width: 23vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.5vw;

        .login-line {
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
                --w: 4vw;
                --h: 4vw;
            }
        }

        .title {
            font-size: 1.5vw;
            font-weight: bold;
            text-align: center;
        }

        .input-box {
            display: flex;
            flex-direction: column;
            gap: 0.5vw;
            margin: 2vw 0;

            .input-item {
                display: flex;
                flex-direction: column;
                gap: 0.2vw;

                .input-name {
                    font-size: 0.8vw;
                    font-weight: 500;
                    color: var(--text-color);
                }

                .input-line {
                    box-sizing: border-box;
                    width: 100%;
                    height: 2vw;
                    display: flex;
                    align-items: center;
                    gap: 0.5vw;
                    background-color: #fff;
                    border: 0.1vw solid var(--border-color);
                    border-radius: 0.2vw;
                    padding: 0.7vw;

                    .icon {
                        --w: 1vw;
                        --h: 1vw;
                    }

                    input {
                        flex: 1;
                        border: none;
                        outline: none;
                        font-size: 0.8vw;
                    }
                }

                .input-error {
                    color: red;
                    font-size: 0.7vw;
                }
            }
        }

        .btn-box {
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .btn {
                --h: 2vw;
                height: var(--h);
                font-size: 0.75vw;
                line-height: var(--h);
                border-radius: 0.3vw;
                text-align: center;
            }

            .login-btn {
                color: #fff;
                background-color: #2563eb;
    
                &:hover {
                    background-color: #1d4ed8;
                }
            }
    
            .register-btn {
                color: #333333;
    
                &:hover {
                    color: #2563eb;
                    background-color: #2563eb10;
                }
            }
        }
    }
}

@media (max-aspect-ratio: 16/9) {
    .login-container {
        .login-box {
            width: 25vw;
            gap: 1.5vw;

            .login-line {
                .icon {
                    --w: 5.5vw;
                    --h: 5.5vw;
                }
            }

            .title {
                font-size: 2vw;
            }

            .input-box {
                gap: 1vw;

                .input-item {
                    gap: 0.5vw;

                    .input-name {
                        font-size: 1vw;
                    }

                    .input-line {
                        height: 2.5vw;
                        gap: 1vw;
                        border-radius: 0.5vw;
                        padding: 1vw;

                        .icon {
                            --w: 1.2vw;
                            --h: 1.2vw;
                        }

                        input {
                            font-size: 1vw;
                        }
                    }
                }
            }

            .btn-box {
                gap: 1.5vw;

                .btn {
                    --h: 2.5vw;
                    font-size: 1vw;
                    border-radius: 0.5vw;
                }
            }
        }
    }
}

@media (max-aspect-ratio: 4/3) {
    .login-container {
        height: 55vw;

        .login-box {
            width: 35vw;
            gap: 3vw;

            .login-line {
                .icon {
                    --w: 7vw;
                    --h: 7vw;
                }
            }

            .title {
                font-size: 2.5vw;
            }

            .input-box {
                gap: 1.5vw;

                .input-item {
                    gap: 1vw;

                    .input-name {
                        font-size: 1.5vw;
                    }

                    .input-line {
                        height: 3.5vw;
                        gap: 1.5vw;

                        .icon {
                            --w: 1.5vw;
                            --h: 1.5vw;
                        }

                        input {
                            font-size: 1.2vw;
                        }
                    }
                }
            }

            .btn-box {
                gap: 1.7vw;

                .btn {
                    --h: 3.5vw;
                    font-size: 1.4vw;
                    border-radius: 0.8vw;
                }
            }
        }
    }
}

@media (max-aspect-ratio: 1/1) {
    .login-container {
        height: 80vw;

        .login-box {
            width: 50vw;
            gap: 5vw;

            .login-line {
                .icon {
                    --w: 10vw;
                    --h: 10vw;
                }
            }

            .title {
                font-size: 3.5vw;
            }

            .input-box {
                gap: 2vw;

                .input-item {
                    gap: 1.5vw;

                    .input-name {
                        font-size: 2vw;
                    }

                    .input-line {
                        height: 5vw;
                        gap: 2vw;
                        border-radius: 1vw;
                        padding: 1.5vw;

                        .icon {
                            --w: 2.5vw;
                            --h: 2.5vw;
                        }

                        input {
                            font-size: 2vw;
                        }
                    }
                }
            }

            .btn-box {
                gap: 2vw;

                .btn {
                    --h: 5vw;
                    font-size: 2vw;
                    border-radius: 1vw;
                }
            }
        }
    }
}

@media (max-aspect-ratio: 3/4) {
    .login-container {
        height: 100vw;

        .login-box {
            width: 60vw;
            gap: 6vw;

            .login-line {
                .icon {
                    --w: 13vw;
                    --h: 13vw;
                }
            }

            .title {
                font-size: 4vw;
            }

            .input-box {
                gap: 3vw;

                .input-item {
                    gap: 2vw;

                    .input-name {
                        font-size: 2.5vw;
                    }

                    .input-line {
                        height: 7vw;
                        gap: 3vw;
                        border-radius: 1.5vw;
                        padding: 2.5vw;

                        .icon {
                            --w: 3vw;
                            --h: 3vw;
                        }

                        input {
                            font-size: 2.3vw;
                        }
                    }
                }
            }

            .btn-box {
                gap: 2.5vw;

                .btn {
                    --h: 7vw;
                    font-size: 2.5vw;
                    border-radius: 1.2vw;
                }
            }
        }
    }
}

@media (max-aspect-ratio: 9/16) {
    .login-container {
        height: 150vw;

        .login-box {
            width: 75vw;
            gap: 9vw;

            .login-line {
                .icon {
                    --w: 16vw;
                    --h: 16vw;
                }
            }

            .title {
                font-size: 6vw;
            }

            .input-box {
                gap: 4vw;

                .input-item {
                    gap: 3vw;

                    .input-name {
                        font-size: 3.5vw;
                    }

                    .input-line {
                        height: 10vw;
                        gap: 3.5vw;
                        border-radius: 1.8vw;
                        padding: 3vw;

                        .icon {
                            --w: 4.5vw;
                            --h: 4.5vw;
                        }

                        input {
                            font-size: 3vw;
                        }
                    }
                }
            }

            .btn-box {
                gap: 3vw;

                .btn {
                    --h: 9vw;
                    font-size: 3vw;
                    border-radius: 1.5vw;
                }
            }
        }
    }
}
</style>